<template>
  <!-- html -->
  <div class="person">
    <ul>
      <li v-for="k in list" :key="k.id">{{ k.name }} -- {{ k.age }}</li>
    </ul>
  </div>
</template>

<script lang="ts" setup name="Person">
import { withDefaults } from "vue";
import { type Persons } from "@/types";

//接受 a
// defineProps(["a"]);

//接收的同时保存起来
// let x = defineProps(["a", "list"]);
// console.log(x);

// 只接收list
// defineProps(["list"]);

//接收list + 限制类型
// defineProps<{ list: Persons }>();

//接收list + 限制类型 + 限制必要性 + 指定默认值
withDefaults(defineProps<{ list?: Persons }>(), {
  list: () => [{ id: "dsafsa", name: "康师傅", age: 55 }],
});

//接收list 同时将props保存起来
// let x = defineProps(['list'])
</script>
<style scoped>
/* scoped表示样式只能影响到当前.vue的template */
.person {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}
button {
  margin: 0 5px;
}
</style>
